<template>
    <div class="inspector-panel">
      <div v-if="!selectedElement">
        <h3>页面设置</h3>
        <div class="preset-buttons">
            <button @click="setPageSize(595, 842)">A4 竖版</button>
            <button @click="setPageSize(842, 595)">A4 横版</button>
        </div>
        <div class="form-group-inline">
          <div class="form-group">
            <label>宽度 (pt)</label>
            <input v-model.number="pageWidth" type="number" />
          </div>
          <div class="form-group">
            <label>高度 (pt)</label>
            <input v-model.number="pageHeight" type="number" />
          </div>
        </div>
      </div>
  
      <div v-if="selectedElement" class="form-container">
        <h3>属性编辑</h3>
        </div>
        <div v-if="selectedElement && selectedElement.type === 'table'">
  <div class="form-group">
    <label>表头 (逗号分隔)</label>
    <input v-model="tableHeaders" type="text" />
  </div>
  <div class="form-group">
    <label>列宽 (逗号分隔)</label>
    <input v-model="tableColumnWidths" type="text" />
  </div>
  <div class="form-group">
    <label>数据键名</label>
    <input v-model="tableDataKey" type="text" />
  </div>
</div>

    </div>
    
  </template>
  
  

  <script setup lang="ts">
  import { computed } from 'vue';
  import { useTemplateStore } from '@/stores/templateStore';
  
  const store = useTemplateStore();
  const selectedElement = computed(() => store.selectedElement);
  // --- 【新增】表格属性的计算属性 ---
const tableHeaders = computed({
    get: () => selectedElement.value?.headers?.join(', ') || '',
    set: (value) => {
        if (selectedElement.value) {
            store.updateElement(selectedElement.value.id, { headers: value.split(',').map(h => h.trim()) });
        }
    }
});

const tableColumnWidths = computed({
    get: () => selectedElement.value?.columnWidths?.join(', ') || '',
    set: (value) => {
        if (selectedElement.value) {
            store.updateElement(selectedElement.value.id, { columnWidths: value.split(',').map(w => Number(w.trim())) });
        }
    }
});

const tableDataKey = computed({
    get: () => selectedElement.value?.dataKey || '',
    set: (value) => {
        if (selectedElement.value) {
            store.updateElement(selectedElement.value.id, { dataKey: value });
        }
    }
});
  // --- 【新增】页面设置的计算属性 ---
  const pageWidth = computed({
      get: () => store.pageSettings.width,
      set: (value) => store.updatePageSettings({ width: value }),
  });
  const pageHeight = computed({
      get: () => store.pageSettings.height,
      set: (value) => store.updatePageSettings({ height: value }),
  });
  const setPageSize = (width: number, height: number) => {
      store.updatePageSettings({ width, height });
  };
  
  
  
  // **核心逻辑**：
  // 我们为每个属性创建一个可写的计算属性 (writable computed property)。
  // 当我们通过 v-model 读取时，它会执行 get()。
  // 当我们通过 v-model 修改输入框时，它会执行 set()，并在 set() 中调用 store 的 action 来更新状态。
  // 这是在 Vuex/Pinia 中处理表单双向绑定的最佳实践。
  
  const text = computed({
    get: () => selectedElement.value?.text || '',
    set: (value) => {
      if (selectedElement.value) {
        store.updateElement(selectedElement.value.id, { text: value })
      }
    },
  })
  
  const fontSize = computed({
    get: () => selectedElement.value?.fontSize || 0,
    set: (value) => {
      if (selectedElement.value) {
        store.updateElement(selectedElement.value.id, { fontSize: Number(value) || 16 })
      }
    },
  })
  
  const x = computed({
    get: () => Math.round(selectedElement.value?.x || 0),
    set: (value) => {
      if (selectedElement.value) {
        store.updateElement(selectedElement.value.id, { x: Number(value) || 0 })
      }
    },
  })
  
  const y = computed({
    get: () => Math.round(selectedElement.value?.y || 0),
    set: (value) => {
      if (selectedElement.value) {
        store.updateElement(selectedElement.value.id, { y: Number(value) || 0 })
      }
    },
  })
  
  const width = computed({
    get: () => Math.round(selectedElement.value?.width || 0),
    set: (value) => {
      if (selectedElement.value) {
        store.updateElement(selectedElement.value.id, { width: Number(value) || 0 })
      }
    },
  })
  
  const height = computed({
    get: () => Math.round(selectedElement.value?.height || 0),
    set: (value) => {
      if (selectedElement.value) {
        store.updateElement(selectedElement.value.id, { height: Number(value) || 0 })
      }
    },
  })
  </script>
  
  <style scoped>
  .preset-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
  .inspector-panel {
    width: 280px;
    padding: 1rem;
    border-left: 1px solid #ddd;
    background-color: #f8f9fa;
    overflow-y: auto;
  }
  .form-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .form-group {
    display: flex;
    flex-direction: column;
  }
  .form-group label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #555;
  }
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .form-group-inline {
    display: flex;
    gap: 1rem;
  }
  .placeholder {
    color: #888;
    font-style: italic;
  }
  .preset-buttons button {
    flex: 1;
    padding: 0.5rem;
    /* ... */
}
  </style>